import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { createGear, updateGear } from "@/store/withdrawGear/withdrawGearAPI";
import {
  changeCreate,
  getGearListAsync,
} from "@/store/withdrawGear/withdrawGearSlice";
import { Form, Input, InputNumber, Modal, Select } from "antd";
import { useEffect, useState, type ReactElement } from "react";
import { shallowEqual } from "react-redux";

export default function Create(): ReactElement<typeof Modal, "div"> {
  const {
    config: {
      data: {
        data: { user_channel_list, wd_country_conf, wd_way_conf, switch_conf = [] } = {},
      } = {},
    } = {},
  } = useAppSelector((state) => state.app, shallowEqual);
  const { create, params } = useAppSelector(
    (state) => state.withdrawGear,
    shallowEqual
  );
  const [loading, setLoading] = useState<boolean>(false);
  const [form] = Form.useForm();
  const dispatch = useAppDispatch();
  const handleClose = () => {
    dispatch(changeCreate({ open: false }));
    form.resetFields();
  };

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
      if (create.type === "create") {
        createGear(values)
          .then(() => {
            handleClose();
            dispatch(getGearListAsync({ ...params }));
          })
          .finally(() => setLoading(false));
      } else if (create.type === "update") {
        updateGear({...values, gear_id: create.record?.gear_id})
          .then(() => {
            handleClose();
            dispatch(getGearListAsync({ ...params }));
          })
          .finally(() => setLoading(false));
      }
    } catch (err) {
      console.error("校验不通过");
    }
  };

  useEffect(() => {
    if (create.open && create.type === "update") {
      form.setFieldsValue(create.record);
    }
  }, [create]);

  return (
    <Modal
      open={create.open}
      title={create.type === "create" ? "创建" : "编辑"}
      onCancel={handleClose}
      onOk={handleOk}
      confirmLoading={loading}
    >
      <Form form={form}>
        <Form.Item
          label="渠道"
          name="channel"
          rules={[{ required: true, message: "请输入" }]}
        >
          <Select options={user_channel_list} disabled={create.type === 'update'} />
        </Form.Item>
        <Form.Item
          label="地区"
          name="country"
          rules={[{ required: true, message: "请输入" }]}
        >
          <Select options={wd_country_conf} disabled={create.type === 'update'} />
        </Form.Item>
        <Form.Item
          label="提现平台"
          name="wd_way"
          rules={[{ required: true, message: "请输入" }]}
        >
          <Select options={wd_way_conf} disabled={create.type === 'update'} />
        </Form.Item>
        <Form.Item
          label="货币符号"
          name="token_symbol"
          rules={[{ required: true, message: "请输入" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="折扣(%)"
          name="discount"
          rules={[{ required: true, message: "请输入" }]}
        >
          <InputNumber style={{width: '100%'}} min={0} max={100} />
        </Form.Item>
        <Form.Item
          label="提现次数"
          name="count"
          rules={[{ required: true, message: "请输入" }]}
        >
          <InputNumber style={{width: '100%'}} max={99999} />
        </Form.Item>
        <Form.Item
          label="金额"
          name="cash"
          rules={[{ required: true, message: "请输入" }]}
        >
          <Input disabled={create.type === "update"} />
        </Form.Item>
        <Form.Item
          label="状态"
          name="status"
          rules={[{ required: true, message: "请输入" }]}
        >
          <Select
            options={switch_conf}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
}
